<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <title>个人信息</title>
  <link rel="icon" href="/static/images/favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div class="edit-avatar">
            <img id="img" th:src="@{/static/admin_pic/{pic}(pic=${session.loginAdmin.pic})}" alt="" class="img-avatar">
            <div class="avatar-divider"></div>
            <div class="edit-avatar-content">
              <input type="file" onchange="picChange()" id="pic_input" name="pic">
              <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
            </div>
          </div>
          <button type="button" class="btn btn-primary" id="submit_btn">保存</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script src="/static/js/ajaxfileupload.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script>

  function picChange() {
    AjaxFile('/admin/pic', 'pic_input')
  }

  /*
发送ajax请求时图片回显
 */
  function AjaxFile(url, ele) {
    if (!checkFileType('#' + ele)) {
      return false
    }

    $.ajaxFileUpload({
      url: url,//用于文件上传的服务器端请求地址
      secureuri: false,//一般设置为false
      fileElementId: ele,//文件上传控件的id属性
      dataType: 'json',//返回值类型 一般设置为json
      success: function (res) {//服务器成功响应处理函数
        $("#img").attr('src', '/static/admin_pic/' + res.imgurl)
      },
      error: function (e)//服务器响应失败处理函数
      {
        msgNotify(e.message, 'danger', 1500)
      }
    })
  }

  //校验文件格式
  function checkFileType(ele) {
    let filename = $(ele).val()
    let fileType = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase()

    if (fileType !== 'jpg' && fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'webp') {
      $(ele).val('')
      msgNotify('请选择jpg,jpeg,png,webp格式的图片', 'danger', 1500)
      return false
    }
    return true
  }

  $("#submit_btn").click(function () {
    let filename = $("#pic_input").val()
    if (filename === '') {
      msgNotify('请先选择头像', 'warning', 1500)
      return false
    }
    $.ajax({
      url: '/editPic',
      type: 'PUT',
      success(res) {
        if (res.flag) {
          msgNotify(res.msg, 'success', 1500)
          setTimeout(function () {
            window.parent.location.reload()
          }, 1500)
        } else {
          msgNotify(res.msg, 'danger', 1500)
        }
      }
    })
  })
</script>
</body>
</html>